<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼎力机器人</title>
</head> 
<style>
*{
    border: none;
    padding: 0;
    margin: 0;
}
div.head1{
    width: 100%;
    height: 15%;
    float: left;
}
#logo{
    height: 100%;
    margin-left: 15%;
}
ul.choose {
    list-style-type: none;
    display: inline-block;
    margin-left: 30%;
    width: 30%;
    height: 62px;
}
ul.choose li{
    font-size: 18px;
    text-align: center;
    line-height: 62px;
    width: 20%;
    float: left;
}
ul.choose li:hover{
    color: aqua;
}
ul.choose li::after{
    padding-bottom: 1px;
    border-bottom: 2px aqua solid;
}
#fdj{
   margin-bottom: 12px;
}
div.banner1{
        height: 347px;
        width: 100%;   
    }
    div.body1{
        height: 55px;
        width: 100%;
        border-bottom: 2px rgba(14, 13, 13, 0.226) solid;
    }
    ul.conul {
        list-style-type: none;
        display: inline-block;
        margin-left: 20%;
        width: 30%;
        height: 55px;
    }
    #fangshi{
        color: rgb(25, 222, 248);
        border-bottom: 4px rgb(25, 222, 248) solid;
    }
    ul.conul li{
        font-size: 18px;
        text-align: center;
        line-height: 55px;
        width: 20%;
        float: left;
    }
    #lianxi{
        padding-bottom: 1px;
        border-bottom: 2px aqua solid;
    }
    ul.conul li:hover{
        color: aqua;
    }
    div.body2{
        width: 70%;
        padding: 5px;
        height: 459px;
        margin-left: 15%;
        margin-top: 8%;
        margin-bottom: 100px;
        border: 2px rgba(14, 13, 13, 0.226) solid;
    }
    .bodytwo{
        width: 60%;
        height: 100%;
        float: left;

    }
    .body3{
        width: 40%;
        height: 100%;
        display: inline-block;
    }
    ul.contact{
        margin-top: 80px;
        margin-bottom: 10px;
        display: inline-block;
        
    }
    ul.contact li{
        margin-top: 10px;
        font-size: 15px;
        font-family: '微软雅黑';
    }
    #li1{
        margin-top: 30px;
        list-style-image: url(./Photo/dz.png);
    }
    #li2{
        list-style-image: url(./Photo/sj.png);
    }
    #li3{
        list-style-image: url(./Photo/cz.png);
    }
    #li4{
        list-style-image: url(./Photo/email.png);
    }
    img.phone{
       display: inline-block;
    }
    #img1,#img2{
        border: 2px rgb(243, 237, 237) solid;
        padding: 5px;
    }
    .img1,.img2{
        text-align: center;
        width: 109px;
        height: 129px;
        margin-left: 30px;
        margin-top: 20px;
        float: left;
    }
    span{
        font-family: '微软雅黑';
    }
    div.body4{
       background-color:  #333e50;
       width: 100%;
       height: 200px;
      
   }
  
  ul.list {
    width: 10%;
    margin-top: 40px;
    margin-bottom: 20px;
     display: inline-block;
     list-style-type: none;
     float: left;
     color: white;
     font-size: large;
  }
  ul.list li{
      margin-top: 10px;
      font-size: small;
  }
  #list1{
      margin-left: 10%;
  }
  #list4{
      width: 20%;
  }
   #footerlogo{
       margin-top: 40px;
   }
  #p_body3{
      color: gray;
      font-size: large;
  }
  div.foot{
      height: 40px;
      width: 100%;
      background-color: #01b0f1;
  }
  #p_foot{
      margin-left: 15%;
        line-height: 40px;
     margin-top: 0;
      font-size: small;
      color: white;
      float: left;
  }
  img.foot{
      margin-top: 10px;
      margin-left: 20px;
  }
  #foot1{
      margin-left: 15%;
  }
</style>
<body>
    <div class="head1">
        <img id="logo" src="./Photo/dl_logo.png" alt="">
        <ul class="choose">
            <li>首页</li>
            <li>产品</li>
            <li>服务</li>
            <li>案例</li>
            <li id="lianxi">联系</li>
        </ul>
        <img id="fdj" src="./Photo/fdj.png" alt=""> </div>
        <div class="banner1">
            <img src="./Photo/banner2.jpg" alt="" width="100%" >
        </div>
        <div class="body1">
            <ul class="conul">
                <li id="fangshi">联系方式</li>
                <li>在线留言</li>
            </ul>
        </div>
        <div class="body2">
            <div class="bodytwo">
                <img src="./Photo/map.jpg" alt="">
        </div>
        <div class="body3">
        <ul class="contact">
             <h3> 广州鼎力互联网软件服务有限公司</h3>
            <li id="li1">地址：广州市越秀区先烈中路76号中侨大厦18楼</li>
            <li id="li2">电话：400-777-9908</li>
            <li id="li3">传真：022-2863-6909</li>
            <li id="li4">邮箱：hezuo@.ciopaas.com</li>
        </ul>
        <div class="img1">
            <img id="img1" src="./Photo/qrcode.jpg" alt="">
            <span id="wechat" >微信公众号</span>
        </div>
        <div class="img2">
            <img id="img1" class="phone" src="./Photo/qrcode.jpg" alt="">
            <span id="phone">手机客户端</span>
        </div>
           
            </div>
        </div>
        <div class="body4">
            <ul class="list" id="list1">产品
                <li>产品介绍</li>
                <li>产品优势</li>
            </ul>
            <ul class="list">服务
                <li>产品手册</li>
                <li>服务理念</li>
                <li>服务协议</li>
                <li>法律声明</li>
            </ul>
            <ul class="list">案例
                <li>客户案例</li>
                <li>合作伙伴</li>
            </ul>
            <ul class="list">新闻
                <li>产品动态</li>
                <li>媒体报道</li>
                <li>其他动态</li>
            </ul>
            <ul class="list" id="list4">联系
                <li>客服热线：400-777-9908</li>
                <li>邮箱：hezuo@ciopaas.com</li>
                <li>周一至周日 9:00-18:00</li>
            </ul>
            <img id="footerlogo" src="./Photo/dl_footer_logo.png" alt="">
            <p id="p_body3">专注于营销与客服的智能语音机器人</p>
        </div>
        <div class="foot">
            <p id="p_foot">© 2017-2018广州鼎力互联网软件服务有限公司版权所有 粤ICP备 18046524   技术支持：企泰科技</p>
            <img id="foot1" class="foot" src="./Photo/wx.png" alt="">
            <img class="foot" src="./Photo/wb.png" alt="">
            <img class="foot" src="./Photo/xf.png" alt="">
            <img class="foot" src="./Photo/share.png" alt="">
        </div>
</body>
</html>